<template>
	<view>
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 基本信息
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form class="from-card" labelPosition="left" labelWidth="80" :model="info" :rules="rules" ref="form1">
							<u-form-item label="车牌号" prop="carNum" required borderBottom>
								<u--input
								type="name"
								v-model="info.carNum"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="车型"
							prop="carType"
							required
							@click="pickShow = true;columns = carType;pickField = 'carType';pickFieldName='carType'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								type="name"
								v-model="info.carType"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
								label="车辆正面照"
								prop="frontImage"
								required
								borderBottom
								ref="frontImage">
								<u-upload
									:fileList="frontImage"
									@afterRead="afterRead($event,'frontImage')"
									@delete="deletePic($event,'frontImage')"
									maxCount="1">
								</u-upload>
							</u-form-item>
							<u-form-item label="品牌型号" prop="brand" borderBottom>
								<u--input
								type="name"
								v-model="info.brand"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="准乘人数" prop="rideNum" required borderBottom>
								<u--input
								type="number"
								v-model="info.rideNum"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="裸车价(元)" prop="price" borderBottom>
								<u--input
								type="number"
								v-model="info.price"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="交强险到期"
							prop="jqxTime"
							@click="dateShow = true;dateField = 'jqxTime';typeField = 'info';"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.jqxTime"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="商业险到期"
							@click="dateShow = true;dateField = 'syxTime';typeField = 'info';"
							prop="syxTime">
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.syxTime"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="负责人"
							prop="auditPersonName"
							@click="gotoPage('/subPackTask/taskButler/chooseFzr')"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.auditPersonName"
								placeholder="请选择"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 行驶证
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form class="from-card" labelPosition="left" labelWidth="80" :model="license" :rules="rules" ref="form1">
							<u-form-item
							label="年检到期日"
							prop="inspectionTime"
							@click="dateShow = true;dateField = 'inspectionTime';typeField = 'license';"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="license.inspectionTime"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="所有人" prop="carOwner" borderBottom>
								<u--input
								type="name"
								v-model="license.carOwner"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="车辆识别码" prop="carCode" borderBottom>
								<u--input
								type="name"
								v-model="license.carCode"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item label="发动机号码" prop="engineCode" borderBottom>
								<u--input
								type="name"
								v-model="license.engineCode"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="注册日期"
							prop="registerTime"
							@click="dateShow = true;dateField = 'registerTime';typeField = 'license';"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="license.registerTime"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="发证日期"
							prop="cardTime"
							@click="dateShow = true;dateField = 'cardTime';typeField = 'license';"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="license.cardTime"
								placeholder="请选择"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
								label="行驶证照片"
								prop="licenseImage"
								ref="licenseImage">
								<u-upload
									:fileList="licenseImage"
									@afterRead="afterRead($event,'licenseImage')"
									@delete="deletePic($event,'licenseImage')"
									maxCount="2">
								</u-upload>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button">
			<view class="submit-block" @click="submit()">
				保存
			</view>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
		
		<u-datetime-picker
			:show="dateShow"
			v-model="dateValue"
			@cancel="dateShow = false"
			@confirm="confirmDate"
			mode="date">
		</u-datetime-picker>
		
	</view>
</template>

<script>
	import { add } from '@/api/car.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	import { strFormatDate } from '@/utils/format.js'
	export default {
		data() {
			return {
				pickShow:false,
				columns:[],
				pickField:'',
				pickFieldName:'',
				dateShow:false,
				dateValue: Number(new Date()),
				dateField:'',
				typeField:'',
				info:{
					carNum:'',
					carType:'',
					frontImage:'',
					brand:'',
					rideNum:'',
					price:'',
					jqxTime:'',
					syxTime:'',
					zxchCarLicenseBo:{},
					auditPerson:'',
					auditPersonName:''
				},
				license:{
					inspectionTime:'',
					carOwner:'',
					carCode:'',
					engineCode:'',
					registerTime:'',
					cardTime:'',
					licenseImage:'',
				},
				frontImage:[],
				licenseImage:[],
				rules:[],
				carType:[
					[{name:'面包车'},{name:'轿车'}]
				],
			}
		},
		methods: {
			async addCar(){
				const { data } = await add(this.info);
				// const { data } = await add({'zxchCarInfoBo':this.info,'zxchCarLicenseBo':this.license});
				if(data.code == 200){
					uni.showToast({ title: '添加车辆成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			submit(){
				this.info.frontImage = this.frontImage.map(e=>e.url).join(',')
				this.license.licenseImage = this.licenseImage.map(e=>e.url).join(',')
				this.info.zxchCarLicenseBo = this.license
				this.addCar()
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].id
				this.info[this.pickFieldName] = e.value[0].name
			},
			confirmDate(e){
				this[this.typeField][this.dateField] = strFormatDate(e.value)
				this.dateShow = false
			},
			// 删除图片后事件
			async deletePic(e,name) {
				let ossIds = []
				ossIds.push(this[name][e.index].ossId)
				const result = await removeByOssId(ossIds);
				this[name].splice(e.index, 1)
			},
			// 读取图片后事件
			async afterRead(e,name) {
				const result = await uploadFile(e.file.url)
				this[name].push(result)
			},
			setProject(item){
				if(item.type == '负责人'){
					this.info.auditPersonName = item.name
					this.info.auditPerson = item.id
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
</style>